<template>
  <div class="fundList">
    <div>
      <!-- 添加按钮和筛选表单 -->
      <el-form ref="add_data">
        <!-- 添加按钮（超级管理员可见） -->
        <el-form-item class="btnRight">
          <el-button
            type="primary"
            size="small"
            @click="handleAdd"
            v-if="user.identify == '超级管理员'"
          >
            <el-icon><Plus /></el-icon>添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格显示数据部分 -->
    <div class="tableContainer">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="70" type="index" prop="id">
        </el-table-column>
        <el-table-column label="创建时间" width="180" prop="createtime">
        </el-table-column>
        <el-table-column label="收支类型" width="160" prop="type">
        </el-table-column>
        <el-table-column label="收入" width="100" prop="income">
        </el-table-column>
        <el-table-column label="支出" width="100" prop="expenditure">
        </el-table-column>
        <el-table-column label="账户现金" width="150" prop="account">
        </el-table-column>
        <el-table-column label="备注" width="150" prop="remark">
        </el-table-column>
        <el-table-column
          label="操作"
          prop="operation"
          width="180"
          v-if="user.identify == '超级管理员'"
        >
          <template #default="scope">
            <!-- 编辑按钮 -->
            <el-button
              size="small"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
            >
              <el-icon><Edit /></el-icon>编辑</el-button
            >
            <!-- 删除按钮 -->
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              <el-icon><Delete /></el-icon>删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenation.current_page"
        :page-sizes="pagenation.page_sizes"
        :page-size="pagenation.page_size"
        :layout="pagenation.layout"
        :total="pagenation.total"
      >
      </el-pagination>
    </div>
    <!-- 弹出框 -->
    <dialog-vue
      :dialog="dialog"
      @upDate="getProfile"
      :formData="formData"
    ></dialog-vue>
  </div>
</template>

<script setup>
import { Timer, Edit, Delete, Plus, Search } from "@element-plus/icons";
import { ref, getCurrentInstance, computed, onMounted } from "vue";
import { useStore } from "vuex";
import DialogVue from "@/components/Dialog.vue"; 
const store = useStore();
const { proxy } = getCurrentInstance();

const tableData = ref([]); //存储请求收到的数据
const alltableData = ref([]);
const pagenation = ref({
  page_size: 1,
  page_sizes: [5,10,15,20],
  total: 0,
  page_index: 1,
  layout: "prev, pager, next, jumper, total, sizes"
})
const user = computed(() => {
  return store.getters.user;
});
const formData = ref({
  type: "",
  description: "",
  income: "",
  expenditure: "",
  account: "",
  remark: "",
  id: ""
})
onMounted(() => {
  getProfile(); // 在组件挂载后调用函数
});
let dialog = ref({
  show: false,
  title: "",
  option: "edit"
});
const setPagenation = () => {
  pagenation.value.total = alltableData.value.length;
  pagenation.value.page_index = 1;
  pagenation.value.page_size = 5;

  table.value = alltableData.value.filter((item, index) => {
    return index < pagenation.value.page_size;
  })
}

const handleSizeChange = (page_size) => {
  pagenation.value.page_index = 1;
  pagenation.value.page_size = page_size;
  tableData.value = alltableData.value.filter((item,index) =>{
    return index < page_size;
  })
       
};
const handleCurrentChange = (page) => {
       let index = pagenation.value.page_size * (page - 1);
       let nums = pagenation.value.page_size * page;
       let table = ref([]);
       for(let i = index; i < nums; i++){
        if(alltableData.value[i]){
          table.value.push(alltableData.value[i]);
        }
        tableData.value = table.value;
       }
}
// 发请求获取表单数据
const getProfile = () => {
  proxy.$axios
    .get("/funds/allFunds")
    .then((res) => {
      alltableData.value = res.data;
      tableData.value = res.data;
      setPagenation();
    })
    .catch((err) => {
      console.log(err);
    });
};
const handleAdd = () =>{
  dialog.value ={
    show: true,
    title: "添加资金信息",
    option: "add"
  };
 formData.value=
 { type: "",
  description: "",
  income: "",
  expenditure: "",
  account: "",
  remark: "",
  id: ""}
}
const handleEdit = (index, row) => {
  dialog.value = {
    show: true,
    title: "修改资金信息",
    option: "edit"
  };
  formData.value={
    type: row.type,
    description: row.description,
    income: row.income,
    expenditure: row.expenditure,
    account: row.account,
    remark: row.remark,
    id: row.id
  }
};
const handleDelete = (index, row) => {
 proxy.$axios.post(`/funds/delete/${row.id}`).then((res)=>{
  proxy.$message("删除成功！");
  getProfile();  
 })
};
</script>

<style lang="less" scoped>
.fundList {
  margin-left: 200px;
  width: 100%;
  height: 100%;
  .tableContainer {
    
  }
}
</style>
